.lighting() {
  background: #b9f3fe;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.1),
    0 1px 0 rgba(255,255,255,0.1),
    0 0 10px rgba(100,231,253,1),
    inset 0 0 8px rgba( 61,157,247,0.8),
    inset 0 -2px 5px rgba(185,231,253,0.3),
    inset 0 -3px 8px rgba(185,231,253,0.5);

  width: 18px;
  height: 18px;
  border-radius: 10px;

  transition: all .5s ease;
}

.flash(@color, @duration) {
  @keyframes anim_flash {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  .flash {
    .fit();

    pointer-events: none;
    background: @color;
    opacity: 0;
  }

  :host([focused]) .flash {
    animation-duration: @duration;
    animation-name: anim_flash;
  }
}

.outline(@color) {
  text-shadow:
     1px  1px 0 @color,
    -1px -1px 0 @color,
     1px -1px 0 @color,
    -1px  1px 0 @color,
     0px  1px 0 @color,
     1px  0px 0 @color,
     0px -1px 0 @color,
    -1px  0px 0 @color;
}
